(function ($) {
    var kendo = window.kendo, ui = kendo.ui, grid = ui.Grid;
    var CHANGE = "change";
    var DEFAULT_COLUMN_WIDTH = 100;

    var ExGrid = grid.extend({
        init: function (element, options) {

            var that = this;

            var udfColumns = $.grep(options.columns, function (item) {
                return (item.width == undefined);
            });


            if (udfColumns.length > 1) {
                udfColumns.splice(-1, 1);
                $.each(udfColumns, function (i, item) {
                    item.width = DEFAULT_COLUMN_WIDTH;
                });
            }

            if (!options.columns[0].attributes) {
                options.columns.splice(0, 0, {
                    title: '<input type=\'checkbox\' class=\'check_allRow\'>',
                    width: 40,
                    minResizableWidth: 40,
                    template: '<input type="checkbox" class="check_row">',
                    attributes: {"data-column-type": "check_row", "style": "text-align:center"},
                    headerAttributes: {"data-column-type": "check_allRow", "style": "text-align:center"}
                }, {
                    title: "序号",
                    attributes: {"style": "text-align:center"},
                    headerAttributes: {"style": "text-align:center"},
                    template: function (dataItem) {
                        return that.dataSource.indexOf(dataItem) + 1
                    },
                    width: 60,
                    minResizableWidth: 60
                })
            }

            grid.fn.init.call(that, element, options);


            //select row when checkbox clicked
            that.element.on('click', ':checkbox.check_row', function (e) {
                var checkbox = $(this);
                var row = checkbox.closest('tr[role="row"]');

                if ((checkbox).is(":checked")) {
                    row.addClass("k-state-selected");
                } else {
                    row.removeClass("k-state-selected");
                }

                var allSelected = that.element.find('tbody tr[role="row"]').length === that.element.find('tbody tr[role="row"].k-state-selected').length;
                that.element.find(':checkbox.check_allRow').prop("checked", allSelected);
                that.trigger(CHANGE);
            });

            //select row when row dblclick
            that.element.on('dblclick', 'tbody tr[role="row"]', function (e) {

                var row = $(this);
                var checkbox = row.find(':checkbox.check_row');

                if ((checkbox).is(":checked")) {
                    checkbox.prop("checked", false);
                    row.removeClass("k-state-selected");
                } else {
                    checkbox.prop("checked", true);
                    row.addClass("k-state-selected");
                }

                var allSelected = that.element.find('tbody tr[role="row"]').length === that.element.find('tbody tr[role="row"].k-state-selected').length;
                that.element.find(':checkbox.check_allRow').prop("checked", allSelected);
                that.trigger(CHANGE);
            });

            //select all row when check all clicked
            that.element.on('click', ':checkbox.check_allRow', function (e) {

                var checkbox = $(this);
                if ((checkbox).is(":checked")) {
                    that.element.find('tbody tr[role="row"]').addClass("k-state-selected");
                    that.element.find('tbody :checkbox.check_row').prop("checked", true);
                }
                else {
                    that.element.find('tbody tr[role="row"]').removeClass("k-state-selected");
                    that.element.find('tbody :checkbox.check_row').prop("checked", false);
                }
                that.trigger(CHANGE)
            });

            $(function () {
              /*  if(options.notFetch)*/
                that.dataSource.fetch();
            });

        }, options: {name: "ExGrid"}, select: function (e) {
            if (e) {
                var rows = this.element.find("div.k-grid-content-locked").find(e).addClass("k-state-selected");
                rows.find(':checkbox').prop('checked', true);
                rows = this.element.find(e).addClass("k-state-selected");
                rows.find(':checkbox').prop('checked', true)
            } else {
                return this.element.children('.k-grid-content').find('tr.k-state-selected[role="row"]')
            }
        }, getSelectedData: function () {
            var selectedData = [];
            var that = this;
            that.select().each(function (i, row) {
                selectedData.push(that.dataItem(row))
            });
            return selectedData
        }, getSelectedId: function () {
            var selectedId = [];
            var that = this;
            that.select().each(function (i, row) {
                selectedId.push(that.dataItem(row).id)
            });
            return selectedId
        }, clearSelection: function () {
            this.element.find("div table tr").removeClass("k-state-selected");
            this.element.find(':checkbox').prop("checked", false)
        }
    });

    ui.plugin(ExGrid);
})(jQuery);